<template>
  <div class="year">
    <div class="top">
     <p class="title">年度游客量对比</p>
     <p class="bg"></p>
   </div>
   <div class="charts" ref="year"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const year = ref()
onMounted(()=>{
  const myCharts = echarts.init(year.value)
  myCharts.setOption({

    tooltip: {},
    yAxis: {show: false},
    xAxis: {
      type: 'category',

    },
    grid: {
      left:20,
      top: 30,
      right: 0,
      bottom: 20
    },
    series: [
      {
        type: 'scatter',
        data: [33,88,21,,9,245,114,88,200,300,205,99],
        // 标记的图像
        symbol: 'rect',
        symbolSize: 16,
        // 图文标签
        // label: {
        //   show: true,
        //   // fontSize:20,
        //   position: 'top'
        // }
      }
    ]
  })
})

</script>

<style lang="scss" scoped>
  .year {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    .charts {
      height: 250px;
    }
    .top {
      font-size: 20px;
      color: #fff;
      .title {
        margin-left: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .bg {
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        width: 68px;
        height: 7px;
        margin-left: 20px;
        
      }
      .txt-right {
        text-align: right;
        margin-right: 20px;
        span {
          color: yellowgreen;
        }
      }
    }
  }
</style>
